<template>
    <!-- <el-input placeholder="菜单查询" class="menu_search" name="searchMenu" clearable v-show="!isCollapse"/>-->
    <el-menu
            :collapse="isCollapse"
            @close="handleClose"
            @open="handleOpen"
            class="app-menu"
            default-active="2"

    >
        <template v-for="(data,index) in leftMenuDatas">
            <el-sub-menu :index="index" v-if="data.children&&data.children.length>0">
                <template #title>
                    <font-awesome-icon :icon="data.menuIcon"
                                       style="color:#409eff;font-size:18px;vertical-align: middle; padding-right: 5px"/>
                    <span>{{data.meta.title}}</span>
                </template>
                <el-menu-item :index="'1-'+ind" :title="sdata.meta.title" v-for="(sdata,ind) in data.children">
                    <font-awesome-icon :icon="sdata.menuIcon"
                                       style="color:#409eff;font-size:18px;vertical-align: middle; padding-right: 5px"/>
                    <template #title>
                        <router-link :to="{path:sdata.path}">{{sdata.meta.title}}</router-link>
                    </template>
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item :index="index" :title="data.meta.title" v-else>
                <font-awesome-icon :icon="data.menuIcon"
                                   style="color:#409eff;font-size:18px;vertical-align: middle; padding-right: 5px"/>
                <template #title>
                    <router-link :to="{path:data.path}">{{data.meta.title}}</router-link>
                </template>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script>

    export default {
        name: "AppLeft",
        props: ["leftMenuDatas", "isCollapse"],

        data() {
            return {}
        },
        setup() {
            // const isCollapse = ref(true)
            const handleOpen = (key, keyPath) => {
                console.log(key, keyPath)
            }
            const handleClose = (key, keyPath) => {
                console.log(key, keyPath)
            }
            return {
                // isCollapse,
                handleOpen,
                handleClose,
            }
        },
        methods: {}
    }
</script>

<style scoped>
    .menu_search {
        margin: 5px 2px;
    }

    .menu_search input[name="searchMenu"] {
        width: 99%;

        border-radius: 20%;
    }

    .el-menu-item {
        height: 40px;
        line-height: 40px;
    }

    .el-menu-item a {
        display: block;
        font-size: 14px;
        color: #2c3e50;
    }

    .el-menu--vertical .el-menu-item a {
        color: #000000;
    }

    .el-menu-item [class^=el-icon] {
        font-size: 24px;
    }

    .el-popper a {
        display: block;
        font-size: 14px;
        color: #f7f7f7;
    }

    .toggle-button {
        cursor: pointer;
        font-weight: bold;
        text-align: left;
        padding-left: 15px;
    }

    .app-menu:not(.el-menu--collapse) {
        width: 200px;
        height: 96%;
    }
</style>